﻿@{
    ViewBag.Title = "Home Page";
}

<div align="left" style="height: 50px">
    <select class="select" data-bind="options: tasks, optionsText: 'description', value: selectedTask, optionsCaption: 'Choose...'"></select>
</div>

<div data-bind="visible: selectedTask" align="left">
    Description:    <input data-bind="value: selectedTask() ? selectedTask().description : 'unknown'"></input> <br/>
    Created:        <input type="datetime" data-bind="value: selectedTask() ? selectedTask().creationTime : 'unknown'"></input> <br/>
    Due on:         <input type="datetime" data-bind="value: selectedTask() ? selectedTask().dueDate : 'unknown'"></input> <br/>
    Originator:     <span data-bind="text: selectedTask() != null && selectedTask().originator != null ? selectedTask().originator().userName : 'unknown'"></span> <br/>
</div>

<script src="../../Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script src="../../Scripts/knockout-2.1.0.js" type="text/javascript"></script>
<script src="../../Scripts/Models/UserModel.js" type="text/javascript"></script>
<script src="../../Scripts/Models/TaskModel.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var viewModel = {
            tasks: ko.observableArray(),
            selectedTask: ko.observable()
        };
        $.getJSON("api/Tasks", function (input) {
            for (i = 0; i < input.length; i++) {
                var model = new taskModel(input[0]);
                viewModel.tasks.push(model);
            }

            ko.applyBindings(viewModel);
        });
    });
</script>